<template>
  <div class="recommend-main">
    <div
      class="recommend-item"
      v-for="(item, index) in recommendList"
      :key="index"
      @click="itemClick(item)"
    >
      <img :src="item.scene_pic_url" alt="" />
      <p class="title">{{ item.title }}</p>
      <p class="desc">{{ item.subtitle }}</p>
      <p class="price">{{ item.price_info | priceFilter }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    recommendList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      // loading: false,
      // finished: false,
    };
  },
  filters: {
    priceFilter(val) {
      return val + "元起";
    },
  },
  methods: {
    itemClick(item) {
      let index = this.recommendList.findIndex(items => items.id == item.id)
      let id = this.recommendList[index].id
      // console.log(id)
      this.$router.push('/topdetail/' + id)
    }
  }
};
</script>

<style lang="scss" scoped>
.recommend-main {
 
  .recommend-item {
    margin-bottom: 10px;
     background-color: #fff;
    p {
      text-align: center;
      padding: 10px 0;
    }
    .title {
      font-size: 16px;
    }
    .desc {
      color: #999999;
    }
    .price {
      color: #b4282d;
      padding: 15px 0;
    }
  }
}
img {
  width: 100%;
}
</style>>